<template>
  <div>
    <el-card class="!border-none" shadow="never">
        <el-page-header :content="$route.meta.title" @back="$router.back()" />
    </el-card>
    <div class="drag-container flex">
      <div class="left-content">
      <div class="left">
        <div class="title-name">{{ title }}</div>
        <draggable
          :list="cards"
          ghost-class="ghost"
          chosen-class="chosenClass"
          animation="300"
          @start="onStart"
          @end="onEnd"
          :itemKey="'index'"
        >
          <template #item="{ element,index }">
            <ImageCard
              :data="element"
              :index="index"
              :key="index"
              :active_index="active_index"
              @edit="editCard(index)"
              @delete="deleteCard(index)"
            />
          </template>
        </draggable>
        <!-- 添加图片按钮 -->
        <div class="btn">
          <el-button @click="addCard" type="primary">
            <template #icon>
              <icon name="el-icon-Plus" />
            </template>
            添加图片组件
          </el-button>
        </div>
      </div>
    </div>

      <div class="right">
        <div class="right-title">
          <el-form>
            <el-form-item label="标题">
              <el-input v-model="title" placeholder="输入标题" clearable />
            </el-form-item>
          </el-form>
        </div>
        <!-- 配置面板 -->
        <ConfigPanel
          v-if="cards.length != 0"
          :data="to_data"
          :index="active_index"
          @save="updateCard"
          @delete="deleteCard"
        />
      </div>
      <div class="center">
        <el-button class="w-[180px]" type="primary" v-prevent-reclick="3000" @click="savInfo">保 存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import draggable from 'vuedraggable';
import ImageCard from './ImageCard.vue';
import ConfigPanel from './ConfigPanel.vue';
import { imgSave, imgDetailSave, imgDetail } from '@/api/operation'
import feedback from '@/utils/feedback'
import useMultipleTabs from '@/hooks/useMultipleTabs'

// 定义拖拽列表
const cards:any = ref([]);

const to_data:any = ref({})

const active_index:any = ref(-1)

// 添加新图片组件
const addCard = () => {
  cards.value.push({ pics: '', link: '', link_type: '', index: cards.value.length  });// styles: { borderRadius: 0, padding: 0 }
};

// 删除图片组件
const deleteCard = (index: number) => {
  cards.value.splice(index, 1);
};

// 编辑某个 card
const editCard = (index: number) => {
  console.log(index)
  active_index.value = index;
  to_data.value = cards.value[index];
  console.log(to_data.value)
};

// 保存配置面板的修改
const updateCard = (newData: any) => {
  console.log('保存配置面板的修改')
  console.log(newData)
  cards.value[active_index.value] = newData;
  to_data.value = newData;
};

//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
};

const route = useRoute()
const router = useRouter()
const {removeTab} = useMultipleTabs()
const title = ref('')
const savInfo = async ()=>{
  console.log(cards.value)
  console.log(route.query.type)
  if (route.query.id) {
    await imgSave({
      id: route.query.id,
      name: title.value
    })
    saveData()
  } else {
    const res = await imgSave({
      id: '',
      name: title.value
    })
    console.log(res)
    saveData(res.id)
  }
}
// 上面的保存活动页 id和name(就是标题)的信息
const saveData = async (id?: any) => {
  await imgDetailSave({
    page_id: route.query.id || id,
    name: title.value,
    content: cards.value
  })
  feedback.msgSuccess('保存成功')
  removeTab()
  router.back()
}

const getDetail = async () => {
  const data = await imgDetail({
    page_id: route.query.id
  })
  title.value = data.name;
  cards.value = data.list;
  if (data.list.length != 0) {
    active_index.value = 0;
    to_data.value = data.list[0];
  }
}
route.query.id && getDetail()

</script>

<style lang="scss" scoped>
.drag-container{
  position: relative;
  width: 100%;
  height: 700px;
}
.cards-group{
  width: 300px;
  height: 600px;
  background-color: #FFFFFF;
}
.card-item {
  margin-bottom: 10px;
}
.title-name{
  position: absolute;
  left: 30%;
  top: 0;
  z-index: 100;
  width: 375px;
  height: 40px;
  background: #FFFFFF;
  text-align: center;
  font-size: 18px;
  line-height: 40px;
}
.left-content{
  padding-left: 30%;
  overflow: auto;
  -ms-overflow-style: none; /* 适用于 Internet Explorer 和旧版 Edge */
  scrollbar-width: none; /* 适用于 Firefox */
}
.left-content::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}
.left{
  padding-top: 40px;
  width: 375px;
  // margin-left: 30%;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .1);
  // overflow-y: scroll;
  // overflow-x: hidden;
  // overflow: auto;
  padding-bottom: 20px;
  -ms-overflow-style: none; /* 适用于 Internet Explorer 和旧版 Edge */
  scrollbar-width: none; /* 适用于 Firefox */
}
.left::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}
.right{
  width: 344px;
  margin-left: 144px;
  position: absolute;
  padding-bottom: 100px;
  top: 0px;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  bottom: 0;
  background: #fff;
}
.btn{
  width: fit-content;
  margin: 0 auto;
  padding-top: 20px;
}
.center{
  position: absolute;
  left: 30%;
  bottom: -50px;
  z-index: 100;
  width: 375px;
  display: flex;
  justify-content: center;
}
.right-title{
  padding: 15px 15px 0 15px;
}
</style>
